import React, {useEffect, useState} from 'react'
import { Form, Button, Table, Modal, Row, Col, DatePicker} from 'antd'
import { connect } from 'umi'
import moment from 'moment';
import {exportSecurityRecord} from '../../service'

const CreateForm = (props) => {

  const { onSubmit, makeUpSubmit, onCancel, visible, operationType, current } = props;
  const [date, setDate] = useState(null);

  const onFormCancel = () => {
    onCancel()
  };

  const handleSubmit = async () => {
    if (operationType==='makeUp'){
      makeUpSubmit(current,date)
    }else {
      onSubmit(current);
    }
  };

  const exportExcel = () => {
    exportSecurityRecord(current.map(item => item.recordId)).then(res => {
      let blob = new Blob([res], {type: 'application/vnd.ms-excel'});
      const objectUrl = window.URL.createObjectURL(blob);
      let a = document.createElement('a');
      a.href = objectUrl; //指定下载链接
      a.download = '社保参保明细.xlsx'; //指定下载文件名
      a.click(); //触发下载
      a.remove(); //除a标签
      window.URL.revokeObjectURL(objectUrl) //释放
    })
  };

  const dateOnChange = (date, dateString) =>{
    setDate(date);
  };

  const columns = [
    {
      title: '姓名',
      fixed: 'left',
      width: 100,
      align: 'center',
      dataIndex: 'name',
      hideInSearch: true,
    },
    {
      title: '参保地',
      width: 150,
      align: 'center',
      dataIndex: 'cityName',
    },
    {
      title: '参保单位',
      align: 'center',
      width: 200,
      dataIndex: 'unitName',
    },
    {
      title: '缴费时间',
      align: 'center',
      width: 120,
      dataIndex: 'operateTime',
      render: (text) => {
        return text!=='-'?moment(text).format('YYYY-MM'):''
      }
    },
    {
      title: '养老保险',
      width: 500,
      children: [
        {
          title: '个人',
          width: 200,
          children: [
            {
              title: '基数',
              width: 100,
              dataIndex: 'endowmentInsuranceBase',
              hideInSearch: true,
            },
            {
              title: '缴纳',
              dataIndex: 'endowmentInsurancePerson',
              hideInSearch: true,
              width: 100
            },
            {
              title: '比例',
              dataIndex: 'endowmentInsurancePersonRate',
              hideInSearch: true,
              width: 100
            },
          ]
        },
        {
          title: '公司',
          width: 200,
          children: [
            {
              title: '缴纳',
              dataIndex: 'endowmentInsuranceOrg',
              hideInSearch: true,
              width: 100
            },
            {
              title: '比例',
              dataIndex: 'endowmentInsuranceOrgRate',
              hideInSearch: true,
              width: 100
            },
          ]
        }
      ]
    },
    {
      title: '工伤保险',
      width: 500,
      children: [
        {
          title: '基数',
          width: 100,
          dataIndex: 'injuryInsuranceBase',
          hideInSearch: true,
        },
        {
          title: '个人',
          width: 200,
          children: [
            {
              title: '缴纳',
              dataIndex: 'injuryInsurancePerson',
              hideInSearch: true,
              width: 100
            },
            {
              title: '比例',
              dataIndex: 'injuryInsurancePersonRate',
              hideInSearch: true,
              width: 100
            },
          ]
        },
        {
          title: '公司',
          width: 200,
          children: [
            {
              title: '缴纳',
              dataIndex: 'injuryInsuranceOrg',
              hideInSearch: true,
              width: 100
            },
            {
              title: '比例',
              dataIndex: 'injuryInsuranceOrgRate',
              hideInSearch: true,
              width: 100
            },
          ]
        }
      ]
    },
    {
      title: '重大医疗',
      width: 500,
      children: [
        {
          title: '基数',
          width: 100,
          dataIndex: 'largerMedicalBas',
          hideInSearch: true,
        },
        {
          title: '个人',
          width: 200,
          children: [
            {
              title: '缴纳',
              dataIndex: 'largerMedicalPerson',
              hideInSearch: true,
              width: 100
            },
            {
              title: '比例',
              dataIndex: 'largerMedicalPersonRate',
              hideInSearch: true,
              width: 100
            },
          ]
        },
        {
          title: '公司',
          width: 200,
          children: [
            {
              title: '缴纳',
              dataIndex: 'largerMedicalOrg',
              hideInSearch: true,
              width: 100
            },
            {
              title: '比例',
              dataIndex: 'largerMedicalOrgRate',
              hideInSearch: true,
              width: 100
            },
          ]
        }
      ]
    },
    {
      title: '医疗保险',
      width: 500,
      children: [
        {
          title: '基数',
          width: 100,
          dataIndex: 'medicalInsuranceBase',
          hideInSearch: true,
        },
        {
          title: '个人',
          width: 200,
          children: [
            {
              title: '缴纳',
              dataIndex: 'medicalInsurancePerson',
              hideInSearch: true,
              width: 100
            },
            {
              title: '比例',
              dataIndex: 'medicalInsurancePersonRate',
              hideInSearch: true,
              width: 100
            },
          ]
        },
        {
          title: '公司',
          width: 200,
          children: [
            {
              title: '缴纳',
              dataIndex: 'medicalInsuranceOrg',
              hideInSearch: true,
              width: 100
            },
            {
              title: '比例',
              dataIndex: 'medicalInsuranceOrgRate',
              hideInSearch: true,
              width: 100
            },
          ]
        }
      ]
    },
    {
      title: '失业保险',
      width: 500,
      children: [
        {
          title: '基数',
          width: 100,
          dataIndex: 'unemploymentInsuranceBase',
          hideInSearch: true,
        },
        {
          title: '个人',
          width: 200,
          children: [
            {
              title: '缴纳',
              dataIndex: 'unemploymentInsurancePerson',
              hideInSearch: true,
              width: 100
            },
            {
              title: '比例',
              dataIndex: 'unemploymentInsurancePersonRate',
              hideInSearch: true,
              width: 100
            },
          ]
        },
        {
          title: '公司',
          width: 200,
          children: [
            {
              title: '缴纳',
              dataIndex: 'unemploymentInsuranceOrg',
              hideInSearch: true,
              width: 100
            },
            {
              title: '比例',
              dataIndex: 'unemploymentInsuranceOrgRate',
              hideInSearch: true,
              width: 100
            },
          ]
        }
      ]
    },
    {
      title: '残疾保障金',
      width: 500,
      children: [
        {
          title: '基数',
          width: 100,
          dataIndex: 'disabledEmploymentBase',
          hideInSearch: true,
        },
        {
          title: '个人',
          width: 200,
          children: [
            {
              title: '缴纳',
              dataIndex: 'disabledEmploymentPerson',
              hideInSearch: true,
              width: 100,
            },
            {
              title: '比例',
              dataIndex: 'disabledEmploymentPersonRate',
              hideInSearch: true,
              width: 100,
            },
          ]
        },
        {
          title: '公司',
          width: 200,
          children: [
            {
              title: '缴纳',
              dataIndex: 'disabledEmploymentOrg',
              hideInSearch: true,
              width: 100,

            },
            {
              title: '比例',
              dataIndex: 'disabledEmploymentOrgRate',
              hideInSearch: true,
              width: 100,
            },
          ]
        }
      ]
    },
    {
      title: '生育保险',
      width: 500,
      children: [
        {
          title: '基数',
          width: 100,
          dataIndex: 'maternityInsuranceBase',
          hideInSearch: true,
        },
        {
          title: '个人',
          width: 200,
          children: [
            {
              title: '缴纳',
              dataIndex: 'maternityInsurancePerson',
              hideInSearch: true,
              width: 100,
            },
            {
              title: '比例',
              dataIndex: 'maternityInsurancePersonRate',
              hideInSearch: true,
              width: 100,
            },
          ]
        },
        {
          title: '公司',
          width: 200,
          children: [
            {
              title: '缴纳',
              dataIndex: 'maternityInsuranceOrg',
              hideInSearch: true,
              width: 100,
            },
            {
              title: '比例',
              dataIndex: 'maternityInsuranceOrgRate',
              hideInSearch: true,
              width: 100,
            },
          ]
        }
      ]
    },
    {
      title: '合计',
      fixed: 'right',
      width: 200,
      children: [
        {
          title: '个人',
          fixed: 'right',
          dataIndex: 'personCostTotal',
          hideInSearch: true,
          width: 100
        },
        {
          title: '公司',
          fixed: 'right',
          dataIndex: 'orgCostTotal',
          hideInSearch: true,
          width: 100
        },
      ]
    },
  ];

  const renderFooter = () => {
    if (operationType === 'makeUp'){
      return (
        <>
          <Button onClick={() => onFormCancel()}>取消</Button>
          {/*<Button type="primary" onClick={() => exportExcel()}>导出</Button>*/}
          <Button type="primary" onClick={() => handleSubmit()}>确认补缴</Button>
        </>
      )
    }else {
      return (
        <>
          <Button onClick={() => onFormCancel()}>取消</Button>
          <Button type="primary" onClick={() => exportExcel()}>导出</Button>
          <Button type="primary" onClick={() => handleSubmit()}>确认汇缴</Button>
        </>
      )
    }
  };

  const setDatePicker = () => {
    return (
      <Row>
        <Col style={{ paddingBottom: '24px' }}>
          请选择补缴月份：<DatePicker onChange={dateOnChange} picker="month" />
        </Col>
      </Row>
    )
  };

  return (
    <Modal
      width={'90%'}
      destroyOnClose
      title="汇缴预览"
      visible={visible}
      footer={renderFooter()}
      onOk={handleSubmit}
      onCancel={() => onFormCancel()}
    >
      {operationType === 'makeUp' ? setDatePicker() : ''}
      <Table
        bordered
        pagination={false}
        rowKey="recordId"
        columns={columns}
        dataSource={current}
        scroll={{y:500}}
      />

    </Modal>
  )
}


export default connect(({ user, personnel,global }) => ({
  global
}))(CreateForm)
